<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>结算页</title>
	<link rel="stylesheet" type="text/css" href="./css/all.css" />
	<link rel="stylesheet" type="text/css" href="./css/pages-getOrderInfo.css" />
</head>

<body>
	<div id="app">
		<!--head-->
		<!-- 头部栏位 -->
		<!--页面顶部-->
		<div id="nav-bottom">
			<!--顶部-->
			<div class="nav-top">
				<div class="top">
					<div class="py-container">
						<div class="shortcut">
							<ul class="fl">
								<li class="f-item">NXMALL欢迎您！</li>
								<li class="f-item">{{ username }}</li>
							</ul>
							<div class="fr typelist">
								<ul class="types">
									<li class="f-item"><a href="http://mall.web.netlearning.tech:9103/user/findOrder">我的订单</a></li>
									<li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
									<li class="f-item"><span>我的NXMALL</span></li>
									<li class="f-item"><span>NXMALL会员</span></li>
									<li class="f-item"><span>企业采购</span></li>
									<li class="f-item"><span>关注NXMALL</span></li>
									<li class="f-item"><span>网站导航</li>
								</ul>
							</div>

						</div>
					</div>
				</div>

				<!--头部-->
				<div class="header">
					<div class="py-container">
						<div class="yui3-g Logo">
							<div class="yui3-u Left logoArea">
								<a class="logo-bd" title="NXMALL" href="http://mall.web.netlearning.tech/"></a>
							</div>
							<div class="yui3-u Rit searchArea">
								<!-- <div class="search">
									<form action="" class="sui-form form-inline">
										<div class="input-append">
											<input type="text" id="autocomplete" class="input-error input-xxlarge" />
											<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
										</div>
									</form>
								</div> -->
							</div>

						</div>

					</div>
				</div>
			</div>
		</div>


		<div class="cart py-container" id="cart">
			<!--主内容-->
			<div class="checkout py-container">
				<div class="checkout-tit">
					<h4 class="tit-txt">填写并核对订单信息</h4>
				</div>
				<div class="checkout-steps">
					<!--收件人信息-->
					<div class="step-tit">
						<h5>收件人信息<span></span></h5>
					</div>
					<div class="step-cont">
						<div class="addressInfo">
							<ul class="addr-detail">
								<li class="addr-item">
									<div class="choose-address" v-for="address in addressList">
										<div :class="order.receiverAddress==address.address?'con name selected':'con name'"
											@click="selectAddress(address)"><a>{{address.contact}}<span title="点击取消选择"></span></a></div>
										<div class="con address">
											<span class="place">{{address.address}}</span>
											<span class="phone">{{address.phone}}</span>
											<span class="base" v-if="address.isDefault=='1'">默认地址</span>
										</div>
										<div class="clearfix"></div>
									</div>

								</li>
							</ul>
							<!--确认地址-->
						</div>
					</div>
					<div class="hr"></div>
					<!--支付和送货-->
					<div class="payshipInfo">
						<div class="step-tit">
							<h5>支付方式</h5>
						</div>
						<div class="step-cont">
							<ul class="payType">
								<li :class="{ selected: order.payType == '1' }" @click="order.payType='1'">在线支付<span title="点击取消选择"></span></li>
								<li :class="{ selected: order.payType == '0' }" @click="order.payType='0'">货到付款<span title="点击取消选择"></span></li>
							</ul>
						</div>
						<div class="hr"></div>
						<div class="step-tit">
							<h5>送货清单</h5>
						</div>
						<div class="step-cont">
							<ul class="send-detail">
								<li>
									<div class="sendType">
										<span>配送方式：</span>
										<ul>
											<li>
												<div class="con express">天天快递</div>
												<div class="con delivery">配送时间：预计8月10日（周三）09:00-15:00送达</div>
											</li>
										</ul>
									</div>
									<div class="sendGoods">
										<span>商品清单：</span>
										<ul class="yui3-g" v-for="cart in cartList" v-if="cart.checked==true">
											<li class="yui3-u-1-6">
												<span><img :src="cart.item.image" width="100px" height="100px" /></span>
											</li>
											<li class="yui3-u-7-12">
												<div class="desc">{{cart.item.name}}</div>
												<div class="seven">7天无理由退货</div>
											</li>
											<li class="yui3-u-1-12">
												<div class="price">￥{{(cart.item.price/100).toFixed(2)}}</div>
											</li>
											<li class="yui3-u-1-12">
												<div class="num">X {{cart.item.num}}</div>
											</li>
											<li class="yui3-u-1-12">
												<div class="exit">有货</div>
											</li>
										</ul>

									</div>
									<div class="buyMessage">
										<span>买家留言：</span>
										<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont" v-model="order.buyerMessage"></textarea>
									</div>
								</li>
								<li></li>
								<li></li>
							</ul>
						</div>
						<div class="hr"></div>
					</div>

					<div class="linkInfo">
						<div class="step-tit">
							<h5>发票信息</h5>
						</div>
						<div class="step-cont">
							<span>普通发票（电子）</span>
							<span>个人</span>
							<span>明细</span>
						</div>
					</div>
					<div class="cardInfo">
						<div class="step-tit">
							<h5>使用优惠/抵用</h5>
						</div>
					</div>
				</div>
			</div>
			<div class="order-summary">
				<div class="static fr">
					<div class="list">
						<span><i class="number">{{totalNum}}</i>件商品，总商品金额</span>
						<em class="allprice">¥{{(totalMoney/100).toFixed(2)}}</em>
					</div>
					<div class="list">
						<span>返现：</span>
						<em class="money">¥{{(preferential/100).toFixed(2)}}</em>
					</div>
					<div class="list">
						<span>运费：</span>
						<em class="transport">0.00</em>
					</div>
				</div>
			</div>
			<div class="clearfix trade">
				<div class="fc-price">应付金额:　<span class="price">¥{{(totalMoney/100).toFixed(2)}}</span></div>
				<div class="fc-receiverInfo">
					寄送至:
					<span id="receive-address">{{order.receiverAddress}}</span>
					收货人：<span id="receive-name">{{order.receiverContact}}</span>
					<span id="receive-phone">{{order.receiverMobile}}</span>
				</div>
			</div>
			<div class="submit">
				<a class="sui-btn btn-danger btn-xlarge" @click="saveOrder()">提交订单</a>
			</div>
		</div>
		<!-- 底部栏位 -->
		<!--页面底部-->
		<div class="clearfix footer">
			<div class="py-container">
				<div class="footlink">
					<div class="Mod-service">
						<ul class="Mod-Service-list">
							<li class="grid-service-item intro  intro1">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro2">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro  intro3">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro4">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro intro5">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
						</ul>
					</div>
					<div class="clearfix Mod-list">
						<div class="yui3-g">
							<div class="yui3-u-1-6">
								<h4>购物指南</h4>
								<ul class="unstyled">
									<li>购物流程</li>
									<li>会员介绍</li>
									<li>生活旅行/团购</li>
									<li>常见问题</li>
									<li>购物指南</li>
								</ul>

							</div>
							<div class="yui3-u-1-6">
								<h4>配送方式</h4>
								<ul class="unstyled">
									<li>上门自提</li>
									<li>211限时达</li>
									<li>配送服务查询</li>
									<li>配送费收取标准</li>
									<li>海外配送</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>支付方式</h4>
								<ul class="unstyled">
									<li>货到付款</li>
									<li>在线支付</li>
									<li>分期付款</li>
									<li>邮局汇款</li>
									<li>公司转账</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>售后服务</h4>
								<ul class="unstyled">
									<li>售后政策</li>
									<li>价格保护</li>
									<li>退款说明</li>
									<li>返修/退换货</li>
									<li>取消订单</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>特色服务</h4>
								<ul class="unstyled">
									<li>夺宝岛</li>
									<li>DIY装机</li>
									<li>延保服务</li>
									<li>NXMALLE卡</li>
									<li>NXMALL通信</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>帮助中心</h4>
								<img src="./img/wx_cz.jpg">
							</div>
						</div>
					</div>
					<div class="Mod-copyright">
						<ul class="helpLink">
							<li>关于我们<span class="space"></span></li>
							<li>联系我们<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>商家入驻<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们</li>
						</ul>
						<p>地址：北京市海淀区建材城东路金隅智造工场 邮编：100096 </p>
						<p>京ICP备21001421号京公网安备110102108808</p>
					</div>
				</div>
			</div>
		</div>
		<!--页面底部END-->
	</div>
	<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>

	<script>


		$(function () {
			$(".address").hover(function () {
				$(this).addClass("address-hover");
			}, function () {
				$(this).removeClass("address-hover");
			});
			/*
				$(".choose-address .name").click(function(){
					 $(this).addClass("selected");
					 $(this).parent().siblings().children('.name').removeClass("selected");
					 var place = $(this).siblings('.address').children('.place').text();
					 var phone = $(this).siblings('.address').children('.phone').text();
					 $("#receive-name").text($(this).text());
					 $("#receive-address").text(place);
					 $("#receive-phone").text(phone)
				});
				*/

			// $(".payType li").click(function () {
			// 	$(this).toggleClass("selected").siblings().removeClass("selected");
			// });
		})
	</script>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					cartList: {},
					totalNum: 0,//总数量
					totalMoney: 0,//总金额
					preferential: 0,//优惠金额
					addressList: [], //地址列表
					payType: '1',//在线支付
					order: { receiverAddress: '', receiverMobile: '', receiverContact: '', payType: '1' },//当前订单
					username: ''
				}
			},
			created() {
				axios.get(`http://mall.web.netlearning.tech:9104/login/username`).then(response => {
					console.log("username:", response)
					this.username = response.data.username;
					sessionStorage.setItem('usrname', this.username)
				})

				this.findCartList();//查询购物清单
				this.findAddressList();//查询地址列表
			},
			methods: {
				findCartList() {
					axios.get(`/order/findNewOrderItemList`).then(response => {
						this.cartList = response.data;
						this.count();//更新合计数
					});
				},
				count() {
					this.totalNum = 0;  //数量
					this.totalMoney = 0; //金额
					//循环购物车
					for (let i = 0; i < this.cartList.length; i++) {
						if (this.cartList[i].checked) { //判断如果选中，数量和金额累加
							this.totalNum += this.cartList[i].item.num;
							this.totalMoney += this.cartList[i].item.money;
						}
					}
					//计算优惠金额
					axios.get(`/cart/preferential`).then(response => {
						this.preferential = response.data.preferential;
						this.totalMoney = this.totalMoney - this.preferential;//最后的总金额
					});
				},
				findAddressList() { //查询地址列表
					axios.get(`/order/findAddressList`).then(response => {
						this.addressList = response.data;
						for (let i = 0; i < this.addressList.length; i++) {
							if (this.addressList[i].isDefault == '1') {
								this.order.receiverAddress = this.addressList[i].address;// 地址
								this.order.receiverMobile = this.addressList[i].phone;//手机号
								this.order.receiverContact = this.addressList[i].contact;//联系人
							}
						}
					});
				},
				selectAddress(address) { //选择地址
					this.order.receiverAddress = address.address;// 地址
					this.order.receiverMobile = address.phone;//手机号
					this.order.receiverContact = address.contact;// 联系人
				},
				saveOrder() { //保存订单
					axios.post(`/order/saveOrder`, this.order).then(response => {
						if (response.data.ordersn != null) {//如果有订单号
							if (this.order.payType === '1') {
								location.href = `pay.html?orderId=${response.data.ordersn}&money=${response.data.money}`;
							} else {
								location.href = 'paysuccess.html'
							}
						}
					});
				},
				selectPayType(payType) { //选择支付方式

				}
			}
		})
	</script>
</body>

</html>
